﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>整页制作</title>
<style>
*{ margin:0; padding:0;}
body{ font-size:12px;}
li{ list-style:none;}
img{ border:none; vertical-align:top;}
a{ text-decoration:none; color:inherit;}
.clear{ zoom:1;}
.clear:after{ content:"";display:block; clear:both;}

#header{ width:950px; margin:0 auto; height:74px;}
.logo{ float:left; margin:19px 0 0 1px;}
#header ul{ float:right; line-height:20px; margin-top:37px;}
#header li{ float:left; color:#888888; padding-left:13px; margin-left:21px; background:url(headerUlBg.png) no-repeat 0 center;}
#header .line{ background:none; padding:0; margin-left:14px;}
#header .moblie{ background:url(headerUlMoblie.png) no-repeat 0 3px;}

#nav{ width:100%; height:37px; border-top:1px #dbdbdb solid; border-bottom:2px #ff6600 solid;}
.navContent{ width:950px; height:100%; margin:0 auto;}
.navContent .menu{ margin-left:32px; line-height:37px; float:left;}
.navContent .menu li{ float:left; font-size:14px; margin-right:65px; color:black;}
.navContent .menu .active{ background:url(navUlActive.png) no-repeat center bottom;}
.navContent .icon{ float:right; margin-top:8px;}
.navContent .icon li{ float:left; margin-left:6px;}


#main{ width:950px; margin:0 auto;}
.subMenu{ float:right; line-height:51px;}
.subMenu li{ float:left; color:#888; margin-left:19px;}
.subMenu .active{ color:#ff6600;}
.banner{clear:both;}
.list{ border-left:1px #d3d3d3 solid; margin:15px 0;}
.list li{ float:left; width:315px; height:387px; border:1px #d3d3d3 solid; border-left:none;}
.list li h2{ line-height:49px; font-size:18px; padding-left:90px; margin:22px 0 11px 0;}
.list li:nth-of-type(1) h2{ background:url(listH2Bg1.png) no-repeat 31px 0;}
.list li:nth-of-type(2) h2{ background:url(listH2Bg2.png) no-repeat 31px 0;}
.list li:nth-of-type(3) h2{ background:url(listH2Bg3.png) no-repeat 31px 0;}

.list li p{ padding-left:30px; padding-right:35px; line-height:24px; color:#666666;}
.list li p a{ color:blue;}
.list li .p1{ color:black; font-weight:bold;}
.list li .img1{ margin:11px 0 0 30px;}
.list li .img2{ margin:-6px 0 0 30px;}
.list li .img3{ margin-left:30px;}
.list li .more{ margin-left:30px; line-height:27px; color:blue;}
.list li div{ margin-bottom:15px;}

.message{ margin-top:15px;}
.messageL{ width:600px; float:left; border-top:1px #dbdbdb solid;}
.messageR{ width:310px; float:right;}
.messageL h2,.messageR h2{ font-size:14px; height:36px; line-height:32px; background:url(messageH2Bg.png) no-repeat; margin-top:-1px;}
.messageL p,.messageR p{ line-height:22px;}
.messageL a{ color:blue;}
.messageL div{ margin-bottom:22px;}
.messageL ul{}
.messageL li{ line-height:28px; padding-left:20px; background:url(messageUlBg.png) no-repeat 0 center;}
.messageR div{ border-top:1px #dbdbdb solid; margin-bottom:20px;}
.messageR span{ color:#ff6600;}
.messageR ul{ margin-top:15px;}
.messageR li{ line-height:22px;}
.messageR li a{ color:blue; padding-left:6px; background:url(messageUlBg2.png) no-repeat 0 center;}

#footer{ width:100%; height:85px; background:#d6d6d6; margin-top:3px;}
.footerContent{ width:950px; margin:0 auto; position:relative; padding-top:25px;}
.footerContent .map{ position:absolute; right:0; top:0;}
.footerContent p{ line-height:22px; text-align:center; color:#666666;}
</style>
</head>

<body>
<div id="header">
	<a class="logo" href="#"><img src="logo.png"></a>
    <ul>
    	<li><a href="#">中文</a></li>
        <li><a href="#">ahwjkd</a></li>
        <li><a href="#">djkdcccc</a></li>
        <li><a href="#">aasd</a></li>
        <li><a href="#">cccccc</a></li>
        <li><a href="#">的方法都是</a></li>
        <li class="line">|</li>
        <li class="moblie"><a href="#">手机版</a></li>
    </ul>
</div>
<div id="nav">
	<div class="navContent">
    	<ul class="menu">
        	<li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">公司</a></li>
            <li class="active"><a href="#">开放合作</a></li>
            <li><a href="#">招聘</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">论坛</a></li>
        </ul>
        <ul class="icon">
        	<li><a href="#"><img src="navIcon1.png"></a></li>
            <li><a href="#"><img src="navIcon1.png"></a></li>
            <li><a href="#"><img src="navIcon1.png"></a></li>
            <li><a href="#"><img src="navIcon1.png"></a></li>
            <li><a href="#"><img src="navIcon1.png"></a></li>
        </ul>
    </div>
</div>
<div id="main">
	<ul class="subMenu">
    	<li><a href="#">开放合作首页</a></li>
        <li><a href="#">运营商合作</a></li>
        <li><a href="#">终端厂商合作</a></li>
        <li><a href="#">互联网合作</a></li>
        <li><a href="#">开放平台</a></li>
        <li class="active"><a href="#">开发者中心</a></li>
        <li><a href="#">战略投资</a></li>
    </ul>
<div class="banner">
    	<a href="#"><img src="banner.png"></a>
    </div>
    <ul class="list clear">
    	<li>
        	<h2>技术文档区</h2>
            <p class="p1">UC浏览器</p>
            <p>文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于文本对基于</p>
            <img src="listBtn.png" border="0" usemap="#Map" class="img1">
            <map name="Map">
            <area shape="poly" coords="5,18" href="#">
            <area shape="poly" coords="14,6,4,20,14,32,102,32,108,15,105,4,21,3,13,3,7,8,5,13,5,18" href="#">
            </map>
        </li>
        <li>
        	<h2>演示发布区</h2>
            <div>
            	<p><a href="#">基于重力感应</a></p>
                <p>主要特点:canvas+</p>
                <p>手机测试地址</p>
            </div>
            <div>
            	<p><a href="#">基于重力感应</a></p>
                <p>主要特点:canvas+</p>
                <p>手机测试地址</p>
            </div>
            <div>
            	<p><a href="#">基于重力感应</a></p>
                <p>主要特点:canvas+</p>
                <p>手机测试地址</p>
            </div>
            <img class="img2" src="listBtn2.png">
        </li>
        <li>
        	<h2>性能发布区</h2>
            <p>主要特点:canvas+</p>
            <p>主要特点:canvas+</p>
            <p>主要特点:canvas+</p>
            <p>主要特点:canvas+</p>
            <img class="img3" src="listImg.png"><br>
            <a class="more" href="#">查看详细>></a>
        </li>
    </ul>
    <div class="banner2">
    	<a href="#"><img src="banner2.png"></a>
    </div>
    <div class="message clear">
    	<div class="messageL">
        	<h2>UC浏览器开放参数介绍</h2>
            <div>
                <p>参数介绍</p>
                <p>参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍</p>
            </div>
            <div>
                <p>参数介绍</p>
                <p>参数介绍绍参数介绍绍<a href="#">点击下载</a></p>
                <p>参数介绍绍参数介绍绍</p>
            </div>
            <div>
            	<p>相关资料下载</p>
                <ul>
                	<li><a href="#">UC浏览器UC浏览器UC浏览器</a></li>
                    <li><a href="#">UC浏览器UC浏览器UC浏览器</a></li>
                    <li><a href="#">UC浏览器UC浏览器UC浏览器</a></li>
                </ul>
            </div>
        </div>
        <div class="messageR">
        	<div>
                <h2>联系方式</h2>
                <p>联系邮箱: <span>aaaa@qq.com</span></p>
                <p>联系邮箱: <span>aaaa@qq.com</span></p>
            </div>
            <div>
                <h2>联系方式</h2>
                <p>参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍参数介绍</p>
                <ul>
                	<li><a href="#">参数介绍参数介绍参</a></li>
                    <li><a href="#">参数介绍参数介绍参</a></li>
                    <li><a href="#">参数介绍参数介绍参</a></li>
                    <li><a href="#">参数介绍参数介绍参</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer">
	<div class="footerContent">
    	<div class="map">
    		<a href="#"><img src="footerBtn.png"></a>
        </div>
        <p>黄金阿克苏来得及阿隆索肯德基啊绿卡时间的里卡多</p>
        <p>黄金阿克苏来得及阿隆索肯多</p>
    </div>
</div>
</body>
</html>
